import React, { Component } from 'react'
import { Layout, Menu } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
import 'antd/dist/antd.css'
import LeftNavLink from '../../LeftNavLink'
import PubSub from 'pubsub-js'
const { SubMenu } = Menu;
const { Sider } = Layout;
export default class LeftMenu extends Component {
    open_sub1 = () => {
        let pageinfo = { id: '1', name: 'page2_open_carema' }
        PubSub.publish('left_select_change', pageinfo)
    }
    open_sub2 = () => {
        let pageinfo = { id: '2', name: 'page2_open_microphone' }
        PubSub.publish('left_select_change', pageinfo)
    }
    open_sub3 = () => {
        let pageinfo = { id: '3', name: 'page3_take_snap' }
        PubSub.publish('left_select_change', pageinfo)
    }
    open_sub4 = () => {
        let pageinfo = { id: '4', name: 'page4_screen_share' }
        PubSub.publish('left_select_change', pageinfo)
    }
    open_sub5 = () => {
        let pageinfo = { id: '5', name: 'page5_video_filter' }
        PubSub.publish('left_select_change', pageinfo)
    }
    open_sub6 = () => {
        let pageinfo = { id: '6', name: 'page6_local_file' }
        PubSub.publish('left_select_change', pageinfo)
    }
    open_sub7 = () => {
        let pageinfo = { id: '7', name: 'page7_local_canvas' }
        PubSub.publish('left_select_change', pageinfo)
    }
    open_sub8 = () => {
        let pageinfo = { id: '8', name: 'page8_record_audio' }
        PubSub.publish('left_select_change', pageinfo)
    }
    open_sub9 = () => {
        let pageinfo = { id: '9', name: 'page9_record_video' }
        PubSub.publish('left_select_change', pageinfo)
    }
    open_sub10 = () => {
        let pageinfo = { id: '10', name: 'page10_rtc_connection' }
        PubSub.publish('left_select_change', pageinfo)
    }
    open_sub11 = () => {
        let pageinfo = { id: '11', name: 'page11_video_connection' }
        PubSub.publish('left_select_change', pageinfo)
    }
    open_sub12 = () => {
        let pageinfo = { id: '12', name: 'page12_canvas_connection' }
        PubSub.publish('left_select_change', pageinfo)
    }
    open_sub13 = () => {
        let pageinfo = { id: '13', name: 'page13_text_connection' }
        PubSub.publish('left_select_change', pageinfo)
    }
    open_sub14 = () => {
        let pageinfo = { id: '14', name: 'page14_file_connection' }
        PubSub.publish('left_select_change', pageinfo)
    }

    open_sub15 = () => {
        let pageinfo = { id: '15', name: 'page15_p2p_one2one', isP2PLogin: false }
        PubSub.publish('left_select_change', pageinfo)
    }
    render() {
        return (
            <Sider width={200} className="site-layout-background">
                <Menu
                    mode="inline"
                    defaultSelectedKeys={['1']}
                    defaultOpenKeys={['left_sub1']}
                    style={{ height: '100%', borderRight: 0 }}
                >
                    <SubMenu key="left_sub1" icon={<UserOutlined />} title="WebRtc基础">
                        {/* <LeftNavLink to="/home/news">News</LeftNavLink> */}
                        <Menu.Item onClick={this.open_sub1} key="left_sub1_1">打开摄像头</Menu.Item>
                        <Menu.Item onClick={this.open_sub2} key="left_sub1_2">打开麦克风</Menu.Item>
                        <Menu.Item onClick={this.open_sub3} key="left_sub1_3">截取视频</Menu.Item>
                        <Menu.Item onClick={this.open_sub4} key="left_sub1_4">共享屏幕</Menu.Item>
                        <Menu.Item onClick={this.open_sub5} key="left_sub1_5">视频滤镜</Menu.Item>
                        <Menu.Item onClick={this.open_sub6} key="left_sub1_6">本地文件媒体流</Menu.Item>
                        <Menu.Item onClick={this.open_sub7} key="left_sub1_7">Canvas媒体流</Menu.Item>
                        <Menu.Item onClick={this.open_sub8} key="left_sub1_8">录制音频</Menu.Item>
                        <Menu.Item onClick={this.open_sub9} key="left_sub1_9">录制视频</Menu.Item>
                        <Menu.Item onClick={this.open_sub10} key="left_sub1_10">建立连接</Menu.Item>
                        <Menu.Item onClick={this.open_sub11} key="left_sub1_11">将视频发送到远端</Menu.Item>
                        <Menu.Item onClick={this.open_sub12} key="left_sub1_12">同步白板</Menu.Item>
                        <Menu.Item onClick={this.open_sub13} key="left_sub1_13">文本收发</Menu.Item>
                        <Menu.Item onClick={this.open_sub14} key="left_sub1_14">文件收发</Menu.Item>
                    </SubMenu>
                    <SubMenu key="left_sub2" icon={<UserOutlined />} title="WebRtc实战">
                        <Menu.Item onClick={this.open_sub15} key="left_sub2_1">一对一视频通话</Menu.Item>
                    </SubMenu>
                </Menu>
            </Sider>
        )
    }
}
